<style lang="less" scoped>
	.wrap{
		width: 100%;
		margin: 60px auto 30px;
		.title{
			width: 100%;
			height: 200px;
			background: url('../../images/banner_imgcourse.png') no-repeat 50%;
			.div{
				padding-top: 86px;
				text-align: center;
				span:nth-child(1),span:nth-child(3){
					display: inline-block;
					width: 40px;
					height: 1px;
					background: #FFFFFF;
					vertical-align: super;
				}
				span:nth-child(2){
					font-size: 20px;
					color: #FFFFFF;
					line-height: 22px;
					margin: 0 20px;
				}
			}
		}
		.content{
			width: 1200px;
			margin: 10px auto 0;
			.left{
				float: left;
				width: 310px;
				min-height: 864px;	
				background: #FFFFFF;
				border: 1px solid #E3E8EA;
				padding: 40px 45px;
				.div{
					width: 220px;
					line-height: 30px;
					background: #F6FAF9;
					cursor: pointer;
					font-size: 14px;
					text-align: center;
					margin-bottom: 12px;
				}
				.div:hover{
					color: #FE9333;
				}
				.on{
					background: #FE9333;
					color: #fff;
				}
				.on:hover{
					color: #fff;
				}
			}
			.fixed{
				position: fixed;
				top:65px;
			}
			.right{
				float: right;
				width: 870px;
				min-height: 864px;
				background: #FFFFFF;
				border: 1px solid #E3E8EA;
				padding: 40px 40px 70px 40px;
				text-align: center;
				.rightTitle{
					text-align: left;
					font-size: 14px;
					color: #FB9132;
					line-height: 24px;
					font-weight: bold;
				}
				.rightCon{
					text-align: justify;
					font-size: 14px;
					color: #686E71;
					line-height: 24px;
					margin-bottom: 30px;
				}
				.img{
					overflow: hidden;
					.font{
						margin-top: 50px;
					}
					p{
						text-align: justify;
						font-size: 14px;
						line-height: 24px;
					}
				}
			}
		}
	}
</style>

<template>
	<div @click="bodyClick">
		<v-header :loginBack="loginBackFn"></v-header> 
		<!-- 内容部分 -->
		<div class="wrap">
			<div class="title">
				<div class="div">
					<span></span>
					<span>星星网人物传记图文教程</span>
					<span></span>
				</div>
			</div>
			<div class="content clearfix">
				<div :class="leftFixed" >
					<div :class="item.id == onChooseId ? 'div on':'div' " v-for="item in leftList" @click="choose(item.id)">{{item.name}}</div>
				</div>
				<div class="right">
					<p class="rightTitle">{{crouseTitle}}</p>
					<div class="rightCon">
						<p v-for="item in crouseCon" >{{item}}</p>
					</div>
					<div v-for="item in imgList" class="img">
						<img :src="item.url"/>
						<div class="font" v-if="item.p != 0">
							<p  v-for="item1 in item.p">{{item1}}</p>							
						</div>
					</div>
					<!-- <div v-for="item in leftList">
						<p class="rightTitle">{{item.name}}</p>
						<div class="rightCon">
							<p v-for="item1 in item.crouseCon" >{{item1}}</p>
						</div>
						<div v-for="item2 in item.imgList" class="img">
							<img :src="item2.url"/>
							<div class="font" v-if="item2.p != 0">
								<p  v-for="item3 in item2.p">{{item3}}</p>							
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
		<!--意见反馈-->
		<v-feedback :backModalType="backModal" @backModalTypeFun="showBackModal"></v-feedback>
		<v-footer></v-footer>
	</div>
</template>
<script>
   import global from '../../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
		data(){
			return{
				staticimg:global.staticimg,
				hotsimg:global.imgurl,//图片前缀
				backModal:false,//反馈弹窗
				leftList:[
					{
						'name':'登录注册',
						'id':'0',
						"title":"注册",
						"con":['点击右上角的“注册”按钮，输入手机号码，填写收到的短信验证码，设置好密码后便完成注册。'],
						"imgList":[
							{'url':require('../../images/1_1@1x.png'),"p":[]},
							{'url':require('../../images/1_2@1x.png'),"p":['登录','方式一：点击登录按钮，输入账号与密码即可登录星星网人物传记平台。','方式二：单击QQ登录，点击头像授权即可登录星星网人物传记平台。','方式三：单击微信登录，用手机微信扫一扫即可登录星星网人物传记平台。']},
							{'url':require('../../images/1_3@1x.png'),"p":[]},
							{'url':require('../../images/1_4@1x.png'),"p":[]},
						]
					},
					{
						'name':'传记展示',
						'id':'1',
						"title":"传记展示",
						"con":['传记展示模块展示平台所有公开展示的传记。'],
						"imgList":[
							{'url':require('../../images/2_1@1x.png'),"p":[]},
						]
					},
					{
						'name':'创建传记',
						'id':'2',
						"title":"创建传记选择模板与穴位类型",
						"con":['点击“创建人物传记”，就可以开始创建人物传记。'],
						"imgList":[
							{'url':require('../../images/3_1@1x.png'),"p":['用户输入墓碑二维码或者也可以选择“无二维码编码”进行创建人物传记。']},
							{'url':require('../../images/3_2@1x.png'),"p":['接下来进入到模板库中挑选用户喜欢的模板来创建人物传记，平台有上千套模板供用户选择。用户可以根据：年龄、职业、风格、颜色进行快速筛选模板，也可以通过点击“加载更多”浏览所有模板后再挑选用户喜欢的模板。在浏览过程中，用户如果对多套模板都觉得喜欢，还可以点击“红心”来收藏，方便用户创建过程中进行切换模板以达到用户最满意的效果。用户将鼠标放在模板上，用手机扫一扫功能，能够直观便捷地预览模板在手机上的效果。当用户挑选好模板后，只需点击“使用模板”，即可进入编辑过程。']},
							{'url':require('../../images/3_3@1x.png'),"p":['挑选完好模板之后，根据情况用户可以选择“单人穴”或者“双人穴”。']},
							{'url':require('../../images/3_4@1x.png'),"p":[]},
							{'url':require('../../images/3_5@1x.png'),"p":[]},
						]
					},
					{
						'name':'页面介绍',
						'id':'3',
						"title":"页面介绍",
						"con":['编辑界面各部分功能介绍。'],
						"imgList":[
							{'url':require('../../images/4_1@1x.png'),"p":[]},
							{'url':require('../../images/4_2@1x.png'),"p":[]},
						]
					},
					{
						'name':'新增文本',
						'id':'4',
						"title":"页面介绍",
						"con":['点击文本按钮，元素DIY区将新增一个可以修改的文本，可以利用文本编辑横条编辑文本样式；也可以通过单击文本，显示文本组件设置进行文本样式编辑。'],
						"imgList":[
							{'url':require('../../images/5_1@1x.png'),"p":[]},
						]
					},
					{
						'name':'新增图片',
						'id':'5',
						"title":"新增图片",
						"con":['点击图片按钮，弹出窗口图片素材，你可以使用图片库中的图片，也可以使用自己上传的图片。使用后，元素DIY区将新增此图片，你可以拖拽或放大缩小该图片，也可以通过双击来替换图片。'],
						"imgList":[
							{'url':require('../../images/6_1@1x.png'),"p":[]},
							{'url':require('../../images/6_2@1x.png'),"p":[]},
							{'url':require('../../images/6_3@1x.png'),"p":[]},
							{'url':require('../../images/6_4@1x.png'),"p":[]},
						]
					},
					{
						'name':'设置背景',
						'id':'6',
						"title":"设置背景",
						"con":['点击背景按钮，弹出窗口图片背景素材，你可以使用图片库中的图片，也可以使用自己上传的图片。使用后，元素DIY区背景变为此图，你可以通过背景按钮来更换背景。'],
						"imgList":[
							{'url':require('../../images/7_1@1x.png'),"p":[]},
							{'url':require('../../images/7_2@1x.png'),"p":[]},
							{'url':require('../../images/7_3@1x.png'),"p":[]},
							{'url':require('../../images/7_4@1x.png'),"p":[]},
						]
					},
					{
						'name':'素材管理',
						'id':'7',
						"title":"素材管理",
						"con":['点击顶部“图片、音乐、视频”，出现对应弹层，在此可以对“我的上传”进行管理，包括上传、拖拽、删除。'],
						"imgList":[
							{'url':require('../../images/8_1@1x.png'),"p":[]},
							{'url':require('../../images/8_2@1x.png'),"p":[]},
							{'url':require('../../images/8_3@1x.png'),"p":[]},
							{'url':require('../../images/8_4@1x.png'),"p":[]},
						]
					},
					{
						'name':'照片视频集',
						'id':'8',
						"title":"照片视频集",
						"con":['您可以在手机端展示您放置在照片集与视频集中的照片与视频；在这两个模块中，您可以编辑它们的信息，管理他们的展示方式。此处与手机端都可以将照片点开查看大图。'],
						"imgList":[
							{'url':require('../../images/9_1@1x.png'),"p":[]},
							{'url':require('../../images/9_2@1x.png'),"p":[]},
							{'url':require('../../images/9_3@1x.png'),"p":[]},
						]
					},
					{
						'name':'背景音乐',
						'id':'9',
						"title":"背景音乐",
						"con":['点击“音乐”后，可以查看平台内的音乐或者自己上传音乐，在弹层内试听想选择的背景音乐，选择后点击“确定”，背景音乐生效；同时您可以管理您上传的背景音乐。'],
						"imgList":[
							{'url':require('../../images/10_1@1x.png'),"p":[]},
							{'url':require('../../images/10_2@1x.png'),"p":[]},
						]
					},
					{
						'name':'预览传记',
						'id':'10',
						"title":"预览传记",
						"con":['点击顶部和竖条操作区的“预览”按钮后，弹层手机端的预览样式，可以便捷地查看手机扫码后的样式。'],
						"imgList":[
							{'url':require('../../images/11_1@1x.png'),"p":[]},
							{'url':require('../../images/11_2@1x.png'),"p":[]},
						]
					},
					{
						'name':'分享设置',
						'id':'11',
						"title":"分享设置",
						"con":['点击顶部“分享设置”，弹层分享设置，在这里您可以设置传记的分享封面、分享标题以及分享描述；右侧展示微信分享后的样式；点击“确定”，分享样式生效。'],
						"imgList":[
							{'url':require('../../images/12_1@1x.png'),"p":[]},
							{'url':require('../../images/12_2@1x.png'),"p":[]},
							{'url':require('../../images/12_3@1x.png'),"p":[]},
						]

					},
					{
						'name':'祭扫页面',
						'id':'12',
						"title":"祭扫页面",
						"con":['点击“发布”后，进入祭扫页面，在此页面可以利用二维码、网址分享传记，也可以在此评论传记，以此缅怀。'],
						"imgList":[
							{'url':require('../../images/13_1@1x.png'),"p":[]},
							{'url':require('../../images/13_2@1x.png'),"p":[]},
							{'url':require('../../images/13_3@1x.png'),"p":[]},
						]
					},
					{
						'name':'传记审核',
						'id':'13',
						"title":"祭扫页面",
						"con":['传记包含两种审核，一种是传记内容审核，一种是传记申请公开审核：','1.传记发布之后，进入审核状态，审核状态共三种：“审核成功、审核中、审核失败”；传记发布后再次编辑会重新提交审核，请谨慎编辑。','2.传记审核通过后，可以“申请公开展示”，申请成功后，会显示“公开”状态。'],
						"imgList":[
							{'url':require('../../images/14_1@1x.png'),"p":[]},
							{'url':require('../../images/14_2@1x.png'),"p":[]},
						]
					},
					{
						'name':'客服反馈',
						'id':'14',
						"title":"祭扫页面",
						"con":['点击“发布”后，进入祭扫页面，在此页面可以利用二维码、网址分享传记，也可以在此评论传记，以此缅怀。'],
						"imgList":[
							{'url':require('../../images/15_1@1x.png'),"p":['手机端客服反馈']},
							{'url':require('../../images/15_2@1x.png'),"p":[]},
						]
					},
					{
						'name':'手机端展示',
						'id':'15',
						"title":"手机端展示",
						"con":[
							'扫码后您可在手机端查看传记，页面包括“公司陵园介绍、音乐、双人穴切换、客服反馈、电商、虚拟礼物以及评论”按钮。',
							'1.点击“公司陵园介绍”，可以查看公司简介以及传记所在陵园介绍。',
							'2.点击“音乐”按钮可以切换音乐的播放与暂停。',
							'3.点击“双人穴切换”可以切换您的双人穴传记的展示。',
							'4.点击“客服反馈”可以反馈信息。',
							'5.点击“电商”能够进入电商平台，前提是您的传记已经填写陵园且该陵园有商品上架。',
							'6.点击“虚拟礼物”可以为传记赠送虚拟礼物，表达尊崇之情。',
							'7.点击评论框，可以输入您想要评论的话语。点击“评论”按钮，可以查看该传记的评论。',
							'8.最后你可以分享传记，与他人一同祭奠。'
						],
						"imgList":[
							{'url':require('../../images/16_1@1x.png'),"p":[]},
							{'url':require('../../images/16_2.png'),"p":[]},
						]
					},
					{						
						'name':'电商平台',
						'id':'16',
						"title":"电商平台",
						"con":['点击“电商”按钮进入电商平台后，可以点击左上角星星网logo返回人物传记页面。','电商平台展示各个陵园售卖的商品服务等，用户可根据所需进行购买。'],
						"imgList":[
							{'url':require('../../images/17_1@1x.png'),"p":[]},
						]
					},
					{
						'name':'购买商品',
						'id':'17',
						"title":"购买商品",
						"con":['用户选择要购买的商品后，需要确认赠送的墓主信息，并填写姓名、联系电话，选择服务人员；','用户的所有订单信息都展示在我的中；提交订单后，未付款成功的订单会展示在待付款订单中。'],
						"imgList":[
							{'url':require('../../images/18_1@1x.png'),"p":[]},
							{'url':require('../../images/18_2@1x.png'),"p":[]},
						]

					},
				],
				onChooseId:"0",
				leftFixed:"left absolute",
			}
		},
		created() {
			if(!this.$route.query.id){
				this.choose(0);
			}else{
				if(this.$route.query.id > 17){
					this.$route.query.id = 17;
				}
				this.choose(this.$route.query.id);
			}
			// window.addEventListener('scroll', this.menu);
		},
		mounted(){
			document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
		},
		watch:{
			$route: 'ajax',
		},
		methods:{
			menu() {
                let scrollTop = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop;
                if(scrollTop >= 260 ){
                    this.leftFixed = 'left fixed';//滚动条固定
                }else{
                    this.leftFixed = 'left absolute';//滚动条放开
                }
            },
			choose(id){
				this.onChooseId = id;
				this.imgList = this.leftList[id].imgList;
				this.crouseTitle = this.leftList[id].title;
				this.crouseCon = this.leftList[id].con;
				document.body.scrollTop = 0;
            	document.documentElement.scrollTop = 0;
			},
			showBackModal(value){//打开意见反馈弹窗
				this.backModal = value;//根据组件传出的参数来修改传入的值
			},
			bodyClick(){
				this.backModal = false;
			},
			loginBackFn(){
				return { path: '/course'};//跳转传记页面
			},
		}
    }
</script>